import React,{useState,useEffect} from 'react'
import axios from 'axios'
import Focus from './Focus'
import Sleep from './Sleep'
import '../MY/My.css'
import { Button, Card, Toast } from 'antd-mobile'
import {useNavigate, useLocation} from 'react-router-dom'
import { RightOutline } from 'antd-mobile-icons'
export default function My() {
  const navigate = useNavigate()
  const [data,setData] = useState({
    name:"Strive",
    img:'https://img.axureshop.com/76/f2/4c/76f24c3cde0f4d4e89019bd9147be2a7/images/%E6%88%91%E7%9A%84/u1100.png',
    day:2,
  })
  const onClick = () => {
    Toast.show('点击了卡片')
  }
  useEffect(()=>{
    
  },[])
  return (
    <div className='My'>
      <div className='My_top'>
        <div className='My_top_div1'>
          <div>
            <p className='name-p1'><b>{data.name}</b></p>
            <p className='name-p2'>与潮汐相遇的第{data.day}天</p>
          </div>
          <div>
            <div>
              <img onClick={()=>{ navigate('/profile') }} src={data.img} alt="" />
            </div>
          </div>
        </div>
        <div className='My_top_div2'>
          <div className='My_top_div2_hy'>
            <div className='My_top_div2_hy_left'>
              <p className='My_top_div2_hy_p1'>TIDE Plus</p>
              <p>新用户会员优惠</p>
            </div>
            <div>
              <p>高清壁纸</p>
            </div>
          </div>
        </div>
        <div className='My_top_div3'>
          <div className='My_top_div3_div'>
            <div className='My_top_div3_div_item' onClick={()=>{navigate('/reminders')}}>
              <img src='https://img.axureshop.com/76/f2/4c/76f24c3cde0f4d4e89019bd9147be2a7/images/%E6%88%91%E7%9A%84/u1103.png' alt="" />
              <p>每日提醒</p>
            </div>
            <div className='My_top_div3_div_item' onClick={()=>{navigate('/meditation')}}>\
              <img src='https://img.axureshop.com/76/f2/4c/76f24c3cde0f4d4e89019bd9147be2a7/images/%E6%88%91%E7%9A%84/u1105.png' alt="" />
              <p>最近冥想</p>
            </div>
            <div className='My_top_div3_div_item' onClick={()=>{navigate('/message')}}>
              <img src='https://img.axureshop.com/76/f2/4c/76f24c3cde0f4d4e89019bd9147be2a7/images/%E6%88%91%E7%9A%84/u1108.png' alt="" />
              <p>消息中心</p> 
            </div>
            <div className='My_top_div3_div_item' onClick={()=>{navigate('/setup')}}>
              <img src='https://img.axureshop.com/76/f2/4c/76f24c3cde0f4d4e89019bd9147be2a7/images/%E6%88%91%E7%9A%84/u1112.png' alt="" />
              <p>更多设置</p>
            </div>
          </div>
        </div>
      </div>
      <div className='My_bottom'>
        <div className='My_bottom_div1'>
          <p className='My_bottom_div1_p1'>今天</p>
          <p className='My_bottom_div1_p2'>全部</p>
        </div>
        <div className='My_bottom_div2'>
          <Card title={<div className='My_bottom_card_title'><div style={{display:'flex'}}><div className='My_bottom_card_title_div1'><div className='My_title_div1_yuan'></div></div><span>专注</span></div><RightOutline /></div>} onClick={onClick}>
            <div>
              <div className='My_bottom_card_div1'><b>{0}</b>分钟</div>
              <div><Focus/></div>
              <div className='My_bottom_card_div2'>
                <span>00:00</span>
                <span>08:00</span>
                <span>16:00</span>
                <span>24:00</span>
              </div>
            </div>
          </Card>
        </div>
        <div className='My_bottom_div2'>
          <Card title={<div className='My_bottom_card_title'><div style={{display:'flex'}}><div className='My_bottom_card2_title_div1'></div><span>睡眠</span></div><RightOutline /></div>} onClick={onClick}>
            <div>
              <div className='My_bottom_card_div'>
              <div className='My_bottom_card_div1'><b>{1}</b>分钟</div>
              <div><span>睡眠质量&nbsp;&nbsp;</span><span>{92}分</span></div>
              </div>           
              <div className='My_bottom_card_echart'>{<Sleep/>}</div>
              <div className='My_bottom_card_div2'>
              <span>00:00</span>
                <span>00:30</span>
                <span></span>
              </div>
            </div>
          </Card>
        </div>
        <div className='My_bottom_div3'>
          <div className='My_bottom_cards'>
          <Card title={<div className='My_bottom_card_title'><div style={{display:'flex'}}><div className='My_bottom_card3_title_div1'><div className='My_title_div1_yuan'></div></div><span>冥想</span></div></div>} onClick={onClick}>
            <div>
              <div className='My_bottom_card4_div'>
              <div className='My_bottom_card_div1'><b>{0}</b>分钟</div>
              <RightOutline />
              </div>
              
            </div>
          </Card>
          <Card title={<div className='My_bottom_card_title'><div style={{display:'flex'}}><div className='My_bottom_card4_title_div1'><div className='My_title_div1_dian'></div></div><span>呼吸</span></div></div>} onClick={onClick}>
            <div>
            <div className='My_bottom_card4_div'>
              <div className='My_bottom_card_div1'><b>{0}</b>分钟</div>
              <RightOutline />
              </div>
            </div>
          </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
